<template>
    <div>
        <el-form
            class="form-container"
            :model="form"
            :rules="rules"
            ref="postForm"
            label-width="200px"
            v-loading="loading">
            <el-row :gutter="20">
                <el-col :span="16">
                    <el-form-item label="收件人：">
                        {{ orderDetail.addressName }}
                    </el-form-item>
                    <el-form-item label="联系电话：">
                        {{ orderDetail.addressMobile }}
                    </el-form-item>
                    <el-form-item label="收件地址：">
                        {{ orderDetail.province }}{{ orderDetail.city }}{{ orderDetail.county }}{{ orderDetail.address }}
                    </el-form-item>
                    <el-form-item label="快递公司：" prop="logisticsId">
                        <el-select size="mini" v-model="form.logisticsId" placeholder="请选择">
                            <el-option
                                    v-for="item in logisticsList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="快递单号：" prop="logisticsKdh">
                        <el-input size="mini" v-model="form.logisticsKdh" placeholder="请输入快递单号" />
                    </el-form-item>
                    <el-form-item label="发货类型：" prop="sendType">
                        <el-radio-group v-model="form.sendType">
                            <el-radio :label="0">按订单发货</el-radio>
                            <el-radio :label="1">商品分包裹发货</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="发货商品：" v-if="form.sendType==1">
                        <el-tabs v-model="activeName">
                            <el-tab-pane label="未发货" name="first">
                                <el-checkbox-group v-model="form.sendItemId">
                                    <template v-for="item in orderDetail.products">
                                        <el-checkbox v-if="item.shippingStatus==0" :key="item.id" :label="item.id">{{ item.title }}</el-checkbox>
                                    </template>
                                </el-checkbox-group>
                            </el-tab-pane>
                            <el-tab-pane label="已发货" name="second">
                                <el-checkbox-group>
                                    <template v-for="item in orderDetail.products">
                                        <el-checkbox disabled v-if="item.shippingStatus==1" :key="item.id" :label="item.id">{{ item.title }}</el-checkbox>
                                    </template>
                                </el-checkbox-group>
                            </el-tab-pane>
                        </el-tabs>
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="saveLoding" type="primary" size="mini" @click="next()">确定发货</el-button>
                        <el-button type="white" size="mini" @click="cancel()">取消</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
    import {
        order_detail,
        order_logistics,
        order_send
    } from '../../api/order';

    export default {
        name: 'order-send',
        components: {
        },
        props: {
            formData: Object
        },
        computed: {
        },
        watch: {
            formData: {
                immediate: true,
                handler (val) {
                    // console.log(val)
                    this.currentId = val.order_id;
                    this.$nextTick(() => {
                        this.$refs.postForm.resetFields();
                    });

                    if(this.currentId > 0) {
                        this.getDetail()
                    }
                }
            }
        },
        data() {
            return {
                saveLoding: false,
                activeName: "first",
                logisticsList: [],
                orderDetail: {},
                form: {
                    orderId: 0,
                    logisticsId: undefined,
                    logisticsKdh: undefined,
                    sendItemId: [],
                    sendType: 0

                },
                currentId: 0,
                formStatus: 'create',
                rules: {
                    logisticsId: [
                        {
                            required: true,
                            message: '请选择物流公司',
                            trigger: 'blur'
                        }
                    ],
                    logisticsKdh: [
                        {
                            required: true,
                            message: '请输入快递单号',
                            trigger: 'blur'
                        }
                    ],
                },
                loading: false,
                fetchSuccess: true,
                saveLoading: false,
            }
        },
        created() {
            this.getLogistics();
        },
        methods: {
            getLogistics() {
                order_logistics().then((res)=>{
                    this.logisticsList = res.data;
                }).catch((err)=>{
                    this.logisticsList = []
                });
            },
            resetTemp() {
                this.form = {
                    orderId: 0,
                    logisticsId: undefined,
                    logisticsKdh: undefined,
                    sendItemId: [],
                    sendType: 0
                };
            },
            getDetail() {
                this.resetTemp();

                order_detail(this.currentId).then(response => {
                    this.orderDetail = response.data;

                    if(this.orderDetail) {
                        this.form.orderId = this.currentId;
                    } else {
                        this.form.orderId = undefined;
                    }
                }).catch(()=>{
                    this.form.orderId = undefined;
                });
            },
            cancel() {
                this.$emit('cancelCreate');
            },
            next() {
                let form = "postForm";

                if(form) {
                    this.$refs[form].validate(valid => {
                        if(valid) {
                            this.saveLoding = true;
                            order_send(this.form).then((res)=>{
                                this.resetTemp();
                                this.saveLoding = false;
                                this.$emit('okCreate');

                            }).catch((err)=>{
                                this.saveLoding = false;
                            })
                        }
                    });
                }
            },
        }
    }
</script>